<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页加水印</title>
</head>

<body>
    <script>
        // https://juejin.cn/post/6946139702684549157
        // https://blog.csdn.net/sunny243788557/article/details/102460327
        const makeWatermark = ({
            container = document.body,
            width = '250',
            height = '150',
            textAlign = 'center',
            textBaseline = 'middle',
            font = "16px microsoft yahei",
            fillStyle = 'rgba(184, 184, 184, .2)',
            content = ['宠物行业数据库', '阿平（15826419349）'],
            rotate = -14,
            zIndex = 1000
        } = {}) => {
            var canvas = document.createElement('canvas');
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            canvas.style.border = '1px solid'
            var ctx = canvas.getContext("2d");
            ctx.textAlign = textAlign;
            ctx.textBaseline = textBaseline;
            ctx.font = font;
            ctx.fillStyle = fillStyle;
            ctx.rotate((rotate * Math.PI) / 180);
            content.forEach(function (s, index) {
                var x = parseFloat(width) / 2 + index * 16
                var y = parseFloat(height) / 2 + index * 16
                ctx.fillText(s, x, y);
            })

            var base64Url = canvas.toDataURL();
            const watermarkDiv = document.createElement("div");
            watermarkDiv.setAttribute('style', `
                    position:fixed;
                    top:0;
                    left:0;
                    width:100vw;
                    height:100vh;
                    z-index:${zIndex};
                    pointer-events:none;
                    background-repeat:repeat;
                    background-image:url('${base64Url}')`);

            container.style.position = 'relative';
            container.appendChild(watermarkDiv, container.firstChild);
        }

        // 调用
        makeWatermark()
    </script>
</body>

</html>